import { Grid } from '@chakra-ui/react';
import Hero from '../components/home/Hero';
import TopProduct from '../components/home/TopProduct';
import FilterPanel from '../components/home/FilterPanel';
import ProductSection from '../components/home/ProductSection';

const HomePage = () => (
  <>
    <Grid templateColumns={{ base: '1fr', lg: '3fr 1fr' }} gap={{ base: 4, lg: 6 }}>
      <Hero />
      <TopProduct />
    </Grid>
    <Grid templateColumns={{ base: '1fr', lg: '260px 1fr' }} gap={{ base: 4, md: 6 }}>
      <FilterPanel />
      <ProductSection />
    </Grid>
  </>
);

export default HomePage;
